<template>
    <view>
        <!-- 搜索导航栏 -->
        <view class="Search-Navigation">
            <!-- 返回图标 -->
            <i class="return-icon" @click="goBack"></i>
            <view class="search-box">
                <!-- 搜索图标 -->
                <i class="search-icon"></i>
                <!-- 搜索输入框 -->
                <u-input placeholder="请输入内容" border="surround" :clearable="true" v-model="value" @input="handleInput" ></u-input>
                <!-- 相机图标 -->
                <i class="camera-icon"></i>
            </view>
            <!-- 搜索按钮 -->
            <view class="search-button" @click="addHistory">搜索</view>
        </view>
		 <view class="search-button" @click="Search-Navigation-backgeound"></view>
        <!-- 搜索内容展示 -->
        <view v-if="value !== ''" class="Search-content">
            <view v-for="(item, index) in asd" :key="index" class="Search-item" @click="searchHistoryItem(item.content)">
                <!-- 搜索结果项图标 -->
                <i class="Search-icon"></i>
				
                <!-- 搜索结果项文本 -->
                <text class="Search-txt">{{ item.content }}</text>
            </view>
        </view>

        <!-- 历史记录框 -->
        <view class="history-box" :class="{ expanded: showAllHistory }" v-show="showHistoryBox && value === ''">
            <view class="history-background">
                <!-- 历史记录标题 -->
                <text class="history-text">历史记录</text>
                <!-- 删除历史记录按钮 -->
                <i v-if="!isEditing" class="delete-icon" @click="startEditing"></i>
                <!-- 编辑选项 -->
                <view v-if="isEditing" class="edit-options">
                    <!-- 删除全部按钮 -->
                    <text class="delete-all" @click="deleteAllHistory">删除全部</text>
                    <!-- 完成按钮 -->
                    <text class="finish" @click="finishEditing">完成</text>
                </view>
            </view>
            <view class="history-items">
                <!-- 历史记录项 -->
                <text v-for="(item, index) in sortedHistory" :key="index" class="history-item" @click="searchHistoryItem(item)">
                    {{ item }}
                </text>
            </view>
            <!-- 切换显示更多历史记录按钮 -->
            <view v-if="history.length > 3" class="toggle-button" @click="toggleHistory">
                {{ showAllHistory ? "收起" : "显示更多" }}
            </view>
        </view>

        <!-- 猜你想搜部分 -->
        <view class="Guess-you-want-to-search" v-show="value === ''">
            <!-- 猜你想搜标题 -->
            <text class="history-text">猜你想搜</text>
            <!-- 切换猜你想搜内容按钮 -->
            <i class="eye-icon" @click="toggleGuessContent"></i>
        </view>
        <view class="Guess-you-want-to-search-content" v-show="showGuessContent && value === ''">
            <!-- 猜你想搜内容展示 -->
            <view v-for="(item, index) in arr" :key="index" class="box" @click="searchGuessItem(item.name)">
                {{ item.name }}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value: "", // 搜索框输入值
                history: [], // 历史记录数组
                showHistoryBox: false, // 是否显示历史记录框
                showAllHistory: false, // 是否展开全部历史记录
                isEditing: false, // 是否处于编辑状态
                showGuessContent: true, // 是否显示猜你想搜内容
                asd: [], // 搜索结果数组
                arr: [ // 猜你想搜内容数组
                    { name: "海边穿搭" },
                    { name: "诱惑瑜伽裤" },
                    { name: "狗熊岭" },
                    { name: "测试图片" },
                    { name: "测试视频" },
                    { name: "小美女" }
                ],
            };
        },
        watch: {
            value(newVal) {
                // 搜索框值变化时调用方法
				
                this.getDataFromBackend();
            }
        },
        methods: {
            goBack() {
                 uni.switchTab({
                        url: '/pages/index/index'
                    });
            },
            getDataFromBackend() {
                // 后端数据请求
                const jsonData = JSON.stringify({ keys: this.value });
                if (this.value.trim()) {
                    this.request("/viewselectallpage/view", "post", jsonData)
                        .then((res) => {
                            this.asd = res.data.result.result; // 更新搜索结果
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            },
            searchHistoryItem(username) {
                // 点击历史记录项执行搜索
                this.value = username;
                this.addHistory();
            },
            addHistory() {
                // 添加历史记录
                const trimmedValue = this.value.trim();
                    if (trimmedValue) {
                        // 检查是否已经存在相同的历史记录项
                        if (!this.history.includes(trimmedValue)) {
                            this.history.push(trimmedValue);
                            this.saveHistory();
                        }
                        this.showHistoryBox = true;
                        this.history.sort((a, b) => a.length - b.length);
                        const jsonData = JSON.stringify({ keys: trimmedValue });
                        this.value = ""; // 清空搜索框


                    // 调用后端接口
                    this.request("/viewselectallpage/view", "post", jsonData)
                        .then((res) => {
                            this.asd = res.data.result.result;
                            // 导航到搜索结果页
                            uni.navigateTo({ url: `/pages/searchBox/commodity02?data=${encodeURIComponent(JSON.stringify(this.asd))}` });
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            },
            clearHistory() {
                // 清空历史记录
                this.history = [];
                this.saveHistory();
                this.showHistoryBox = false;
                this.isEditing = false;
            },
            toggleHistory() {
                // 切换展开收起历史记录
                this.showAllHistory = !this.showAllHistory;
            },
            startEditing() {
                // 开始编辑历史记录
                this.isEditing = true;
            },
            deleteAllHistory() {
                // 删除所有历史记录
                this.clearHistory();
            },
            finishEditing() {
                // 结束编辑历史记录
                this.isEditing = false;
            },
            toggleGuessContent() {
                // 切换显示猜你想搜内容
                this.showGuessContent = !this.showGuessContent;
            },
            searchGuessItem(itemName) {
                // 点击猜你想搜项执行搜索
                this.value = itemName;
                this.addHistory();
            },
            handleInput() {
                // 处理输入框输入事件
                this.change();
                this.queryBackend();
            },
            change() {
                // 根据输入框值切换显示猜你想搜内容
                if (this.value.trim() === '') {
                    this.showGuessContent = true;
                } else {
                    this.showGuessContent = false;
                }
            },
            queryBackend() {
                // 查询后端数据（暂未实现具体逻辑）
            },
            saveHistory() {
                // 保存历史记录到本地存储
                uni.setStorageSync('searchHistory', this.history);
            },
            loadHistory() {
                // 加载历史记录
                const savedHistory = uni.getStorageSync('searchHistory');
                if (savedHistory) {
                    this.history = savedHistory;
                    this.showHistoryBox = this.history.length > 0;
                }
            }
        },
        computed: {
            sortedHistory() {
                // 按历史记录长度排序
                return this.history.sort((a, b) => a.length - b.length);
            }
        },
        onLoad() {
            // 页面加载时加载历史记录
            this.loadHistory();
        }
    };
</script>

<style>
	.Search-Navigation {
		width: 100%;
		height: 100rpx;
		display: flex;
		border-bottom: 1rpx solid gainsboro;
		position: fixed;
		top: 0rpx;
		background-color: white;
	}

	.Search-Navigation-backgeound {
		width: 100%;
		height: 100rpx;
		background-color: antiquewhite;
	}

	.return-icon {
		display: block;
		width: 65rpx;
		height: 65rpx;
		margin: 17rpx 20rpx;
		background-image: url("../../static/icon/retuen.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.search-box {
		width: 550rpx;
		height: 70rpx;
		background-color: rgb(244, 244, 244);
		margin-top: 17rpx;
		border-radius: 30rpx;
		display: flex;
	}

	.search-button {
		width: 100rpx;
		height: 65rpx;
		margin-top: 17rpx;
		text-align: center;
		line-height: 65rpx;
		color: darkgrey;
		cursor: pointer;
	}

	.search-icon,
	.camera-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
		border-radius: 30rpx;
		background-image: url("../../static/icon/search.png");
		background-repeat: no-repeat;
		margin-top: 10rpx;
		background-size: cover;
	}

	.camera-icon {
		background-image: url("../../static/icon/camera.png");
	}

	.delete-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-top: 13rpx;
		margin-right: 15rpx;
		background-image: url("../../static/icon/delete.png");
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}

	.history-box {
		padding: 10rpx;
		width: 700rpx;
		background-color: white;
		margin: auto;
		overflow: hidden;
		transition: height 0.3s ease;
	}

	.history-box.expanded {
		height: auto;
	}

	.history-background {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
	}

	.history-text {
		line-height: 80rpx;
		font-weight: bold;
	}

	.edit-options {
		display: flex;
		align-items: center;
	}

	.delete-all,
	.finish {
		margin-right: 10rpx;
		cursor: pointer;
		color: gray;
		font-weight: bold;
	}

	.finish {
		color: black;
	}

	.history-items {
		max-height: 200rpx;
		overflow: hidden;
	}

	.history-box.expanded .history-items {
		max-height: none;
	}

	.history-item {
		display: inline-block;
		margin-top: 20rpx;
		padding: 10rpx;
		border-radius: 28rpx;
		margin-left: 30rpx;
		border: 1rpx solid gainsboro;
	}

	.toggle-button {
		text-align: center;
		margin-top: 20rpx;
		color: blue;
		cursor: pointer;
	}

	.Guess-you-want-to-search {
		width: 700rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.eye-icon {
		display: block;
		width: 45rpx;
		height: 45rpx;
		margin-top: 18rpx;
		background-image: url("../../static/icon/Small eyes.png");
		background-repeat: no-repeat;
		background-size: cover;
		cursor: pointer;
	}

	.Guess-you-want-to-search-content {
		width: 700rpx;
		display: flex;
		margin: auto;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.box {
		width: 340rpx;
		height: 80rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
	}

	.box-02 {
		width: 150rpx;
		height: 150rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
	}

	.Product {
		display: block;
		width: 90rpx;
		height: 90rpx;
		background-color: #f6f6f8;
		margin: auto;
		border-radius: 50%;
	}

	.Product-icon {
		display: block;
		text-align: center;
	}

	.hotspot {
		width: 250rpx;
		height: 80rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.hotspot-txt {
		line-height: 80rpx;
		font-size: 35rpx;
		color: black;
		font-weight: bold;
	}

	.Search-item {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid gainsboro;
		line-height: 100rpx;
		display: flex;
	}

	.Search-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-top: 26rpx;
		background-image: url("../../static/icon/search.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Search-txt {
		margin-left: 20rpx;
	}

	/* 热点部分样式 */
	.hotspot {
		width: 250rpx;
		height: 80rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.hotspot-icon {
		display: block;
		width: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		background-image: url("../../static/icon/hotspot.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.hotspot-txt {
		line-height: 80rpx;
		font-size: 35rpx;
		color: #f02942;
		font-weight: bold;
	}

	/* 热点内容背景样式 */
	.hotspot-txt-background {
		width: 700rpx;
		height: 1300rpx;
		margin: 15rpx auto;
	}

	/* 热点内容项样式 */
	.hotspot-txt-content {
		width: 100%;
		height: 120rpx;
		margin-top: 10rpx;
		border-bottom: 1rpx solid gainsboro;
		line-height: 140rpx;
		display: flex;
		justify-content: space-between;
	}

	.hotspot-box {
		width: 550rpx;
		height: 120rpx;
		/* background-color: #f02942; */
		display: flex;
	}

	.degree-of-heat-box {
		width: 150rpx;
		height: 120rpx;
		/* background-color: #f02942; */
	}

	.Search-content {
		width: 100%;
		height: 800rpx;
		/* background-color: azure; */
		/* border-bottom: 1rpx solid gainsboro; */
	}

	.hotspot-box-01 {
		/* display: block; */
		margin-left: 25rpx;
	}
</style>